<template>
	<!-- pages/attendance/check/index.wxml -->
	<view class="attendance-check" v-if="hasAuth">
		<!-- 当前项目 -->
		<!-- <view class="block">
    <view class="project-now">
      <view class="name">
        <image class="icon" src="../../../images/icon/icon_marker.png" />
        <view class="text">{{currentProject.projectName}}</view>
      </view>
    </view>
  </view> -->
		<!-- 地图容器 -->
		<view class="map-container">
			<!-- <image bindtap="getLocation" class="find-location" src="../../../images/icon/icon_find_location.svg"></image> -->
			<map
				class="map"
				:show-location="true"
				:circles="circles"
				:polygons="polygons"
				:latitude="latitude"
				:enable-overlooking="true"
				:longitude="longitude"
				scale="16"
				:enable-poi="isShowPoi"
				enable-rotate
			></map>
			<view class="block">
				<view class="project-now">
					<view class="name">
						<image class="icon" :src="markerIcon" />
						<view class="text">{{ hasNoArea ? '管理人员暂未设置考勤区域' : currentProject.projectName }}</view>
					</view>
				</view>
			</view>
			<view class="area-set-container" @tap="toAreaList" v-if="hasEditAuth">
				<image :src="areaSetImg" class="area-set-icon" />
			</view>
			<view class="check-button-block">
				<view class="check-in" data-type="1" @tap="takePhoto">
					<view class="text">进场考勤</view>
					<view class="icon">
						<image :src="checkInIcon" />
					</view>
				</view>
				<view class="check-out" data-type="0" @tap="takePhoto">
					<view class="text">出场考勤</view>
					<view class="icon">
						<image :src="checkOutIcon" />
					</view>
				</view>
			</view>
		</view>
		<!-- 考勤按钮 -->
		<!-- <view class="check-button-block">
    <view class="check-in" data-type="1" bindtap="takePhoto">
      <view class="text">进场考勤</view>
      <view class="icon">
        <image src="../../../images/icon/icon_check_in.svg"/>
      </view>
    </view>
    <view class="check-out" data-type="0" bindtap="takePhoto">
      <view class="text">出场考勤</view>
      <view class="icon">
        <image src="../../../images/icon/icon_check_out.svg"/>
      </view></view>
  </view> -->
	</view>
</template>

<script>
import * as utils from '@/pagesA/utils/util.js';
import { common } from '@/pagesA/utils/common.js';
// import iconMarker from '@/pagesA/assets/image/icon_marker.png';
// import checkInIcon from '@/pagesA/assets/image/icon_check_in.svg';
// import checkOutIcon from '@/pagesA/assets/image/icon_check_out.svg';
// import areaSetImg from '@/pagesA/assets/image/area-set.png';
var markersData = [];
const app = getApp();
export default {
	data() {
		return {
			currentProject: {
				projectName: ''
			},
			markers: [],
			textData: {},
			isShowPoi: true,
			isInArea: false,
			//是否在考勤区内
			hasArea: false,
			//是否拥有考勤组
			areaUuid: '',
			//所在考勤区id
			longitude: '',
			latitude: '',
			position: [
				{
					callout: {
						content: '当前位置',
						padding: 10,
						borderRadius: 2,
						display: 'ALWAYS'
					},
					latitude: 29.56471,
					longitude: 106.55073,
					iconPath: common.imgs.iconMarker,
					width: '34px',
					height: '34px',
					rotate: 0,
					alpha: 1
				}
			],
			interval: null,
			circles: [],
			//圆形考勤区
			polygons: [],
			//多边形考勤区
			markerIcon: common.imgs.iconMarker,
			checkInIcon: common.imgs.checkInIcon,
			checkOutIcon: common.imgs.checkOutIcon,
			hasAuth: true,
			hasNoArea: false,
			areaSetImg: common.imgs.areaSetImg,
			hasEditAuth: false
		};
	},
	onLoad: function (options) {
		// if (app.globalData.projectList.length != 0) {
		//   this.data.hasAuth = true;
		// }
		// if (app.globalData.currentProject && app.globalData.currentProject.projectName) {
		//   this.data.hasAuth = true;
		// }
		// this.setData({
		// 	hasAuth: app.globalData.commonMethods.hiddenAuth(app)
		// });
		common.init();
	},
	onShow: function () {
		// this.setData({
		// 	currentProject: app.globalData.currentProject
		// });
		this.currentProject = uni.getStorageSync('cisdiCurrentProject');
		let that = this;
		let cisdiOpearList = uni.getStorageSync('cisdiOpearList') || [];
		for (let item of cisdiOpearList) {
			if (item == '20131012') {
				//是否有位置管理权限
				this.hasEditAuth = true;
				break;
			}
		}
		// this.setData({
		// 	hasEditAuth: this.hasEditAuth
		// });
		uni.getSetting({
			success(res) {
				// 判断定位的授权
				if (!res.authSetting['scope.userLocation']) {
					uni.authorize({
						scope: 'scope.userLocation',
						success() {
							that.getLocation();
							that.interval = setInterval(() => {
								console.log('show');
								that.getLocation();
							}, 20000);
						},
						fail(errMsg) {
							uni.showModal({
								title: '没有授权无法获取位置信息',
								content: '是否前往设置页面手动开启',
								success: function (res) {
									if (res.confirm) {
										uni.openSetting({
											withSubscriptions: true
										});
									} else {
										uni.showToast({
											icon: 'none',
											title: '您拒绝了获取位置信息'
										});
									}
								},
								fail: function (e) {
									console.log(e);
								}
							});
						}
					});
				} else {
					that.getLocation();
					that.interval = setInterval(() => {
						console.log('load');
						that.getLocation();
					}, 20000);
				}
			}
		});
	},
	onHide: function () {
		clearInterval(this.interval);
	},
	onUnload: function () {
		clearInterval(this.interval);
	},
	methods: {
		makertap: function (e) {
			var id = e.markerId;
			var that = this;
			that.showMarkerInfo(markersData, id);
			that.changeMarkerColor(markersData, id);
		},

		getLocation() {
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					//获取到经纬度值
					// this.setData({
					// 	longitude: res.longitude,
					// 	latitude: res.latitude,
					// 	'position[0].longitude': res.longitude,
					// 	'position[0].latitude': res.latitude
					// });
					this.longitude = res.longitude;
					this.latitude = res.latitude;
					this.position[0].longitude = res.longitude;
					this.position[0].latitude = res.latitude;
					this.getCheckConfig();
				},
				fail: (res) => {
					//定位服务文案调整
					uni.showToast({
						title: JSON.stringify('提示：手机定位功能未开启'),
						icon: 'none'
					});
				}
			});
		},

		handleErrorConfig() {
			// this.setData({
			// 	isInArea: false,
			// 	areaUuid: '',
			// 	circles: [],
			// 	polygons: [],
			// 	hasArea: false,
			// 	hasNoArea: true
			// });
			this.isInArea = false;
			this.areaUuid = '';
			this.circles = [];
			this.polygons = [];
			this.hasArea = false;
			this.hasNoArea = true;
			clearInterval(this.interval);
		},

		getCheckConfig() {
			common.apis.mobileAttendance.getCheckConfig().then(
				(result) => {
					let circles = [];
					let polygons = [];
					if (result.data && result.data.length > 0) {
						let posData = result.data;
						let isInArea = false;
						let areaUuid = '';
						posData.forEach((item) => {
							if (item.type === 1) {
								circles.push({
									latitude: item.content[0].latitude,
									longitude: item.content[0].longitude,
									radius: item.radius,
									strokeWidth: 2,
									color: '#FF943D',
									fillColor: '#FF943D33'
								});
								if (
									utils.isInCircle(
										this.position[0],
										{
											latitude: item.content[0].latitude,
											longitude: item.content[0].longitude
										},
										item.radius
									)
								) {
									isInArea = true;
									areaUuid = item.uuid;
								}
							}
							if (item.type === 2) {
								polygons.push({
									points: item.content,
									strokeWidth: 2,
									strokeColor: '#FF943D',
									fillColor: '#FF943D33'
								});
								if (utils.isInRegion(this.position[0], item.content)) {
									isInArea = true;
									areaUuid = item.uuid;
								}
							}
						});
						console.log(isInArea, areaUuid);
						// this.setData({
						// 	isInArea: isInArea,
						// 	areaUuid: areaUuid,
						// 	circles: circles,
						// 	polygons: polygons,
						// 	hasArea: true
						// });
						this.isInArea = isInArea;
						this.areaUuid = areaUuid;
						this.circles = circles;
						this.polygons = polygons;
						this.hasArea = true;
					} else {
						this.handleErrorConfig();
					}
				},
				() => {
					this.handleErrorConfig();
				}
			);
		},

		/**
		 * 拍照
		 */
		takePhoto(e) {
			if (!this.hasArea) {
				uni.showToast({
					title: '项目未设置考勤区域',
					icon: 'none'
				});
				return;
			}
			if (this.isInArea) {
				uni.navigateTo({
					url: '/pagesA/pages/attendance/camera/takePhoto?type=' + e.currentTarget.dataset.type + '&areaUuid=' + this.areaUuid //跳转到自定义的一个拍照页面
				});
			} else {
				uni.showToast({
					title: '当前位置不在考勤区内',
					icon: 'none'
				});
			}
		},

		showMarkerInfo: function (data, i) {
			var that = this;
			// that.setData({
			// 	textData: {
			// 		name: data[i].name,
			// 		desc: data[i].address
			// 	}
			// });
			that.textData = {
				name: data[i].name,
				desc: data[i].address
			};
		},

		changeMarkerColor: function (data, i) {
			var that = this;
			var markers = [];
			for (var j = 0; j < data.length; j++) {
				if (j == i) {
					data[j].iconPath = '选中 marker 图标的相对路径'; //如：..­/..­/img/marker_checked.png
				} else {
					data[j].iconPath = '未选中 marker 图标的相对路径'; //如：..­/..­/img/marker.png
				}

				markers.push(data[j]);
			}
			// that.setData({
			// 	markers: markers
			// });
			that.markers = markers;
		},

		toAreaList() {
			uni.navigateTo({
				url: '/pagesA/pages/attendance/areaList/areaList'
			});
		}
	}
};
</script>
<style>
page {
	width: 100%;
	height: 100%;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.attendance-check {
	width: 100%;
	height: 100%;
}

.attendance-check .map-container {
	width: 100%;
	height: 80%;
	position: relative;
}

.attendance-check .map-container .map {
	width: 100%;
	height: 100%;
	z-index: 1;
}

.attendance-check .map-container .find-location {
	width: 88rpx;
	height: 88rpx;
	position: absolute;
	bottom: 200rpx;
	z-index: 30;
	right: 30rpx;
}

.attendance-check .block {
	width: 100%;
	height: 64rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	position: fixed;
	top: 24rpx;
	z-index: 30;
}

.attendance-check .area-set-container {
	width: 110rpx;
	height: 110rpx;
	position: absolute;
	right: 8rpx;
	bottom: 120rpx;
	z-index: 30;
}

.area-set-icon {
	width: 100%;
	height: 100%;
}

.attendance-check .project-now {
	height: 64rpx;
	background: #ffffff;
	border-radius: 8rpx;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.attendance-check .project-now .name {
	display: flex;
	align-items: center;
}

.attendance-check .project-now .icon {
	width: 32rpx;
	height: 32rpx;
	margin: 0 16rpx;
}

.attendance-check .project-now .text {
	font-size: 28rpx;
	font-weight: 500;
	color: #1e253f;
	line-height: 32rpx;
}

.attendance-check .project-now .change-button {
	font-size: 28rpx;
	font-weight: 500;
	color: #0071f7;
	line-height: 32rpx;
	margin-right: 16rpx;
}

.attendance-check .check-button-block {
	width: 100%;
	box-sizing: border-box;
	position: absolute;
	z-index: 999;
	top: 84vh;
	padding: 0 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.attendance-check .check-button-block .check-in,
.attendance-check .check-button-block .check-out {
	width: calc(50vw - 45rpx);
	height: 136rpx;
	border-radius: 12rpx;
	background-color: #ffffff;
	box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.25);
	display: flex;
	justify-content: space-between;
	padding: 16rpx;
	box-sizing: border-box;
}

.attendance-check .check-button-block .check-in .text,
.attendance-check .check-button-block .check-out .text {
	font-size: 34rpx;
	font-weight: 600;
	color: #1e253f;
	line-height: 56rpx;
}

.attendance-check .check-button-block .check-in .icon,
.attendance-check .check-button-block .check-out .icon {
	display: flex;
	flex-direction: column-reverse;
}

.attendance-check .check-button-block .check-in .icon image,
.attendance-check .check-button-block .check-out .icon image {
	width: 72rpx;
	height: 72rpx;
}
</style>
